<template>
	<view class="page-user">
		<view class="bgwhite">
			<view class="info_main">
				<view>头像</view>
				<view class="" style="width: 120upx; height: 120upx;">
					<avatar
						selWidth="400upx"
						selHeight="400upx"
						@upload="myUpload"
						:avatarSrc="userInfo.avatar || '../../static/images/common/missing-face.png'"
						avatarStyle="width: 120upx; height: 120upx; "
					></avatar>
				</view>
			</view>
			<view class="info_cont">
				<view>昵称</view>
				<input class="color999" type="text" v-model="userInfo.nickname" placeholder="输入中文或英文，1~8个字" />
			</view>
			<view class="info_cont" @click="show_sex_picker = true">
				<view>性别</view>
				<text class="iconfont icon-fanhui1"></text>
				<view class="color999 uni-input">{{ userInfo.sex || '请选择性别' }}</view>
			</view>
			<view class="info_cont" @click="show_date_picker = true">
				<view>生日</view>
				<text class="iconfont icon-fanhui1"></text>
				<view class="color999 uni-input">{{ userInfo.birthday || '请选择生日' }}</view>
			</view>
			<view class="info_cont" @click="show_addr_picker = true">
				<view>所在地</view>
				<text class="iconfont icon-fanhui1"></text>
				<view class="color999 uni-input">{{ userInfo.addr || '请选择地址' }}</view>
			</view>
			<view class="info_cont">
				<view>手机号</view>
				<text class="iconfont icon-fanhui1"></text>
				<input class="color999" type="text" :value="userInfo.username" disabled="true" />
			</view>
		</view>
		<view class="confirm-btn" @click="submit">确定</view>

		<w-picker :visible.sync="show_sex_picker" mode="selector" :options="sex_arr" value="女" @confirm="onConfirm($event, 'sex')" @cancel="onCancel" ref="selector"></w-picker>

		<w-picker
			:visible.sync="show_date_picker"
			mode="date"
			startYear="1920"
			endYear="2021"
			:current="true"
			fields="day"
			@confirm="onConfirm($event, 'date')"
			@cancel="onCancel"
			:disabled-after="false"
			ref="date"
		></w-picker>

		<w-picker
			:visible.sync="show_addr_picker"
			mode="region"
			:value="userInfo.addr_code"
			default-type="value"
			:hide-area="false"
			@confirm="onConfirm($event, 'region')"
			@cancel="onCancel"
			ref="region"
		></w-picker>
	</view>
</template>

<script>
import avatar from '../../components/yq-avatar/yq-avatar.vue';
import wPicker from '../../components/w-picker/w-picker.vue';

export default {
	components: {
		avatar,
		wPicker
	},
	data() {
		return {
			// userInfo: {},
			show_sex_picker: false,
			show_date_picker: false,
			show_addr_picker: false,
			sex_arr: [
				{
					label: '男'
				},
				{
					label: '女'
				}
			]
		};
	},
	onLoad() {
		//1  把原数据渲染到页面上
	
		// let userInfo = {
		// 	...this.$store.state.userInfo
		// };
		// JSON.parse(JSON.stringify(this.$store.state.userInfo))

		// this.userInfo = userInfo;
	},
	computed:{
		userInfo(){
			return {
					...this.$store.state.userInfo
				}
		}
	},
	methods: {
		myUpload(e) {
			console.log(e);
			console.log(this.userInfo);
			this.userInfo.avatar = e.path;
			this.$forceUpdate()
		},
		onConfirm(e, type) {
			if (type == 'sex') {
				this.userInfo.sex = e.result;
			}
			if (type == 'date') {
				this.userInfo.birthday = e.result;
			}
			if (type == 'region') {
				this.userInfo.addr = e.result;
				this.userInfo.addr_code = e.value;
			}
		},
		onCancel() {
			this.show_sex_picker = false;
			this.show_date_picker = false;
			this.show_addr_picker = false;
		},
		async submit() {
			let uid = this.$store.state.uid;

			let { avatar, nickname, sex, birthday, addr, addr_code } = this.userInfo;

			// 先把图片传到服务器   返回线上路径

			if (avatar && (avatar.startsWith('blob') || avatar.startsWith('_doc'))) {
				uni.showLoading({
					title: '正在上传图片'
				});

				// 把那个图片传到服务器  服务器返回图片路径
				//开发环境
				// let result = await  uniCloud.uploadFile({
				// 	filePath:avatar,
				// 	cloudPath:'avatar.png'
				// });
				//        avatar  = result.fileID;

				let result = await new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'http://81.70.99.163:8000/common/upload',
						filePath: avatar, //要上传文件资源的路径
						name: 'file.png',
						success: uploadFileRes => {
							if (uploadFileRes.statusCode == 200) {
								resolve('http://81.70.99.163:8000' + uploadFileRes.data);
							} else {
								reject('错了');
							}
						},
						fail() {
							reject('错了');
						}
					});
				});

				avatar = result;
			}

			uni.showLoading({
				title: '正在发送数据'
			});

			this.$http
				.post('/user/editUserInfo', {
					avatar,
					nickname,
					sex,
					birthday,
					addr,
					addr_code,
					uid
				})
				.then(res => {
					console.log(res);
					if (res.code == 1) {
						
						//同步一下数据
						let token = uni.getStorageSync('token')
						this.$store.dispatch('getuserInfo',token);
						
						setTimeout(e=>{
							this.back();
						},800)
						
					}

					uni.hideLoading();
				})
				.catch(e => {
					uni.hideLoading();
				});
		}
	}
};
</script>

<style lang="scss">
.bgwhite {
	background: #fff;
}
.page-user {
	width: 100%;
	height: 100%;

	.info_main {
		width: 100%;
		height: 151upx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
		padding: 0 30upx;

		view {
			font-size: 30upx;
			color: #999999;
		}

		image {
			float: right;
			width: 94upx;
			height: 94upx;
			border-radius: 50%;
		}
	}

	.info_main:after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #eeeeee;
	}

	.info_cont {
		width: 100%;
		height: 101upx;
		position: relative;
		overflow: hidden;
		padding: 0 30upx;

		view {
			font-size: 30upx;
			line-height: 101upx;
			color: #999999;
			float: left;
		}

		.txt {
			display: block;
			width: auto;
			height: 101upx;
			float: right;
			text-align: right;
			margin-right: 10upx;
			font-size: 30upx;
			width: 500upx;
		}

		.uni-input,
		input {
			display: block;
			width: auto;
			height: 101upx;
			float: right;
			text-align: right;
			margin-right: 10upx;
			font-size: 30upx;
			width: 500upx;
		}

		text {
			font-size: 14upx;
			color: #bfbfbf;
			float: right;
			line-height: 101upx;
		}

		.iconfont {
			font-size: 28upx;
		}
	}

	.uni-input-placeholder {
		color: #999;
	}

	.info_cont:after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #eeeeee;
	}
}

.confirm-btn {
	width: 80%;
	height: 80upx;
	background: #fdd100;

	border-radius: 60upx;
	margin: 40upx auto;

	text-align: center;
	color: #fff;
	line-height: 80upx;
	font-size: 30upx;
}
</style>
